<template>
    <view class="priview-box">
        <phoneSimuHead
            ref="phoneSimuHead"
            :titleTxt="titleTxt"
            @active="active"
        ></phoneSimuHead>
        <view class="middle-box">
            <swiper
                :id="action.adverPagePic"
                class="sw-box"
                :class="{ 's-b-no-radius': !isRadius }"
                :style="{ width: '100%', height: '100%' }"
                :indicator-dots="indicatordots"
                :autoplay="autoplay"
                :interval="interval"
                :duration="duration"
                :circular="circular"
                @mouseenter.stop="onMouseEnter($event)"
                @mouseleave.stop="onMouseLeave($event)"
                @click="
                    showAdbtn(action.adverPagePic);
                    curEditId = action.adverPagePic;
                "
                @change="swiperChange" 
            >
                <swiper-item v-for="(item, index) in imgs" :key="index">
                    <image :src="item" :mode="mode" />
                </swiper-item>
				
            </swiper>
			<text class="tip-txt" v-if="!imgs || imgs.length == 0">暂未设置广告</text>
            <text
                class="s-jump-t"
                :id="action.adverPageJumpTime"
                @click="
                    edit({ act: action.adverPageJumpTime, data: {} });
                    curEditId = action.adverPageJumpTime;
                "
				v-if="jumpTimeTxt"
                @mouseenter.stop="onMouseEnter($event)"
                @mouseleave.stop="onMouseLeave($event)"
                >{{ jumpTimeTxt }}</text
            >
			<!--                 v-if="action.adverPageJumpTime && showAdSetBtn" -->
            <text
                class="s-jump-t-line"
                v-if="curEditId == action.adverPageJumpTime"
            ></text>
        </view>
        <!-- 广告页设置 -->
        <view
            class="ad-s-txt"
            @click="edit({ act: action.adverPagePic, data: {} })"
            v-if="curEditId == action.adverPagePic && showAdSetBtn"
            >{{ adSetTxt }}</view
        >
        <view class="box-line" v-if="curEditId == action.adverPagePic"></view>
    </view>
</template>

<script>
let timeout = null;
import phoneSimuHead from "@/components/interactive/appComponrnts/phone-simulation-head.vue";
import editInterActive from "@/js/inieractive/EditInteractive.js";
export default {
    components: { phoneSimuHead },
    data() {
        return {
            action: editInterActive.action,

            barTimeTxt: "",
            titleTxt: "女人帮",

            swiperCurrent: 0,

            circular: true,
            indicatordots: true,
            autoplay: true,
            interval: 5000,
            duration: 1000,
            width: "100%",
            height: "100%",
            imgs: [],
            mode: "scaleToFill",
            showDots: true,
            isRadius: true,

            jumpTimeTxt: "",

            adSetTxt: "广告页设置",
            showAdSetBtn: false,
            curEditId: "",
            isEdit: false,
        };
    },
    created() {},
    mounted() {
        this.init();
    },
    methods: {
        /****点击头部,点击编辑活动标题****/
        active(act) {
            this.curEditId = act;
            this.isEdit = false;
            this.showAdSetBtn = false;
        },

        showAdbtn(act) {
            this.isEdit = true;
            this.showAdSetBtn = true;
            this.curEditId = act;
            this.$refs.phoneSimuHead.active(act, 1);
        },

        init() {
            let now = new Date();
            this.barTimeTxt =
                String(now.getHours()) + ":" + String(now.getMinutes());
            uni.$on("init_active_title", (data) => {
                this.titleTxt = data;
            });
        },

        swiperChange(e) {
            const index = e.detail.current;
            this.swiperCurrent = index;
        },

        initData(data) {
			this.jumpTimeTxt = data.time_long == 0 ? "跳过" : `${data.time_long}秒后跳过`;
			this.imgs = data.imgs;
		},

        /***滚动的时候隐藏***/
        handlerScroll() {},

        clickTabBar(index) {},

        edit(value) {
            editInterActive.eidt(value);
        },

        // 防抖
        testFun(fun, value, time = 500) {
            if (timeout) {
                clearTimeout(timeout); // 规定时间内若定时器存在则清除
            }
            timeout = setTimeout(() => {
                fun(value); // 调用接口
            }, time);
        },

        onMouseEnter(event) {
            if (this.isEdit) return;
            this.curEditId = event.currentTarget.id;
        },

        onMouseLeave(event) {
            if (this.isEdit) return;
            this.curEditId = "";
        },

        showLineBox(value) {},

        onLoadBanner(e) {},
    },
};
</script>

<style lang="scss" scoped >
.priview-box {
    width: 100%;
    height: 100%;
    position: relative;
    // height: calc(100% -176upx);
    .statuts-bar-box {
        height: 176upx;
        width: 100%;
        background-color: #fff;
        position: relative;
        cursor: pointer;
        .s-b-b {
            display: flex;
            justify-content: space-between;
            padding: 38upx 20upx;
            .time-txt {
            }
            .pw-per-box {
                color: #aaa;
                display: flex;
                align-items: center;
                view {
                    padding-right: 10upx;
                }
                image {
                    width: 52upx;
                    height: 20upx;
                }
            }
        }
        .tit-txt {
            text-align: center;
            cursor: pointer;
            font-size: 28upx;
        }
    }

    .middle-box {
        width: calc(100% - 40upx); // 100%;
        height: 1286upx; //100%;
        margin: 20upx;
        position: relative;
        cursor: pointer;
        .sw-box {
            overflow: hidden;
            background-color: #fafafa;
			
            image {
                width: 100%;
                height: 100%;
            }
        }
		.tip-txt
		{
			width: 100%;
			position: absolute;
			text-align: center;
			font-size: 36upx;
			margin: auto;
			top: 300upx;
			left: 0;
		}
        .s-jump-t {
            padding: 2upx 30upx;
            position: absolute;
            right: 20upx;
            top: 20upx;
            border-radius: 40upx;
            background-color: rgba(0, 0, 0, 0.6);
            color: #fff;
        }
        .s-jump-t-line {
            border: 1px #000 dashed;
            padding: 6upx 30upx;
            position: absolute;
            right: 10upx;
            top: 10upx;
            height: 50upx;
            width: 128upx;
            pointer-events: none;
        }
    }

    .box-line {
        width: calc(100% - 40upx); // 100%;
        height: 1286upx; //100%;
        position: absolute;
        top: 194upx;
        left: 18upx;
        border: 1px #000 dashed;
        pointer-events: none;
    }

    .ad-s-txt {
        padding: 2upx 30upx;
        position: absolute;
        right: 30upx;
        top: 130upx;
        background-color: #000;
        border-radius: 8upx;
        color: #fff;
        cursor: pointer;
    }
}
</style>
